﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            text-align: center;
            font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        h1, h2, h3 {
            width: 100%;
        }

        code {
            background-color: #f7f7f7;
            padding: .2rem;
            box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 1px 3px 0 rgba(0, 0, 0, 0.06);
        }

        section {
            display: flex;
            flex-wrap: wrap;
        }

            section > div {
                flex: 0 0 50%;
            }

        img {
            border: 1px solid #e3e3e3;
        }
    </style>
</head>
<body>
    <h1>ImageSharp URI API Samples</h1>
    <main>
        <section>
            <h2>Resize</h2>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&height=200</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&height=200" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&height=200&rmode=stretch</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&height=200&rmode=stretch" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&height=200&rmode=pad</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&height=200&rmode=pad" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&rsampler=lanczos3</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&rsampler=lanczos3" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&rsampler=nearest</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&rsampler=nearest" />
                </p>
            </div>
        </section>
        <hr/>
        <section>
            <h2>Format</h2>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&format=jpg</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&format=jpg" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&format=bmp</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&format=bmp" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&format=gif</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&format=gif" />
                </p>
            </div>
        </section>
        <hr/>
        <section>
            <h2>Background Color</h2>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&bgcolor=red</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&bgcolor=red" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&bgcolor=FFFF00</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&bgcolor=FFFF00" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&bgcolor=128,28,32</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&bgcolor=128,28,32" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&bgcolor=C1FF0080</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&bgcolor=C1FF0080" />
                </p>
            </div>
            <div>
                <p>
                    <code>imagesharp-logo.png?width=300&bgcolor=128,28,32,128</code>
                </p>
                <p>
                    <img src="imagesharp-logo.png?width=300&bgcolor=128,28,32,128" />
                </p>
            </div>
        </section>
    </main>
</body>
</html>